
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script src="../../js/highcharts.js"></script>
		<script src="../../js/modules/exporting.js"></script>
		<script type="text/javascript" charset="utf-8">

		jQuery.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
		    // check that we have a column id
		    if ( typeof iColumn == "undefined" ) return [];

		    // by default we only wany unique data
		    if ( typeof bUnique == "undefined" ) bUnique = true;

		    // by default we do want to only look at filtered data
		    if ( typeof bFiltered == "undefined" ) bFiltered = true;

		    // by default we do not wany to include empty values
		    if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

		    // list of rows which we're going to loop through
		    var aiRows;

		    // use only filtered rows
		    if (bFiltered == true) aiRows = oSettings.aiDisplay;
		    // use all rows
		    else aiRows = oSettings.aiDisplayMaster; // all row numbers

		    // set up data array
		    var asResultData = new Array();

		    for (var i=0,c=aiRows.length; i<c; i++) {
		        iRow = aiRows[i];
		        var sValue = this.fnGetData(iRow, iColumn);

		        // ignore empty values?
		        if (bIgnoreEmpty == true && sValue.length == 0) continue;

		        // ignore unique values?
		        else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

		        // else push the value onto the result data array
		        else asResultData.push(sValue);
		    }

		    return asResultData;
};
			/* Data set - can contain whatever information you want */

						    ChartColnames = ["Name",'Apples', 'Oranges',
						                   'Pears', 'Grapes', 'Bananas'];
						    Data=[["Tom",5,3,10,7,2],["Bill",2, 2, 3,
						      2, 1],["Ted",3, 4, 4, 2, 5]];



						  ChartIndex =[1,2,3,5];
						  NameIndex = [0];

						  ChartIndex2 =[0,1,2,3,4];

						  var FullRow1=new Array(Data.length);
						  var names1 = new Array(Data.length);
						  var Tom1 = new Array(Data.length);
						  var ChartCategories1 = new Array(ChartIndex2.length);




						  for (i=0;i<Data.length;i++)
						  {
						    FullRow1[i] =new Array(ChartIndex2.length)
						    names1[i] = Data[i][NameIndex];
						    for(k=0;k<ChartIndex2.length;k++)
						    {
						      FullRow1[i][k] = Data[i][ChartIndex2[k]] ;
						      ChartCategories1[k] = {"sTitle":ChartColnames[ChartIndex2[k]]}
						    }
						    Tom1[i] = FullRow1[i]
						         ;
						  }
						  dataTable = {"aaData":Tom1,"acColumns":ChartCategories1}
						  console.log(dataTable)

			$(document).ready(function() {
				$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
				var crazy = $('#example').dataTable( {
					"aaData": Tom1,
					"aoColumns": ChartCategories1

				} );
				alert(crazy.fnGetColumnData(0))
	} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				DataTables dynamic creation example
			</div>

			<h1>Preamble</h1>
			<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.</p>

			<h1>Live example</h1>
			<div id="dynamic"></div>
			<div class="spacer"></div>
			   <div id="container2" style="height: 300px"></div>

			<script>
			$(function () {


			    ChartColnames = ["Name",'Apples', 'Oranges',
			                   'Pears', 'Grapes', 'Bananas'];
			    Data=[["Tom",5,3,10,7,2],["Bill",2, 2, 3,
			      2, 1],["Ted",3, 4, 4, 2, 5]];



			  ChartIndex =[1,2,3,5];
			  NameIndex = [0];

			  ChartIndex2 =[0,1,2,3,4];

			  var FullRow1=new Array(Data.length);
			  var names1 = new Array(Data.length);
			  var Tom1 = new Array(Data.length);
			  var ChartCategories1 = new Array(ChartIndex2.length);




			  for (i=0;i<Data.length;i++)
			  {
			    FullRow1[i] =new Array(ChartIndex2.length)
			    names1[i] = Data[i][NameIndex];
			    for(k=0;k<ChartIndex2.length;k++)
			    {
			      FullRow1[i][k] = Data[i][ChartIndex2[k]] ;
			      ChartCategories1[k] = {"sTitle":ChartColnames[ChartIndex2[k]]}
			    }
			    Tom1[i] = FullRow1[i]
			         ;
			  }
			  dataTable = {"aaData":Tom1,"acColumns":ChartCategories1}
			  console.log(dataTable)


			  var FullRow=new Array(Data.length);
			  var names = new Array(Data.length);
			  var Tom = new Array(Data.length);
			  var ChartCategories = new Array(ChartIndex.length);




			  for (i=0;i<Data.length;i++)
			  {
			    FullRow[i] =new Array(ChartIndex.length)
			    names[i] = Data[i][NameIndex];
			    for(k=0;k<ChartIndex.length;k++)
			    {
			      FullRow[i][k] = Data[i][ChartIndex[k]] ;
			      ChartCategories[k] = ChartColnames[ChartIndex[k]]
			    }
			    Tom[i] = {"name":names[i],
			           "data":FullRow[i]
			          };
			  }



			        $('#container2').highcharts({
			            chart: {
			                type: 'bar'
			            },
			            title: {
			                text: 'Stacked bar chart'
			            },
			            xAxis: {
			                categories: ChartCategories
			            },
			            yAxis: {
			                min: 0,
			                title: {
			                    text: 'Total fruit consumption'
			                }
			            },
			            legend: {
			                backgroundColor: '#FFFFFF',
			                reversed: true
			            },
			            plotOptions: {
			                series: {
			                    stacking: 'normal'
			                }
			            },
			                series: Tom
			        });
			    }



			 );
			</script>




			  </body>
</html>